
<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6" v-for="(o) in goods" :key="o.id" style="margin-bottom: 15px">
        <el-card :body-style="{ padding: '20px' }">
          <img
              style="width: 350px;height: 250px"
              :src="o.image"
              class="image"
              @click="$router.push(`/desk2-1/${o.id}`)">
          <div style="padding: 14px;">
            <span>{{o.commodityName}}</span>
            <div class="bottom clearfix">
              <span>价格：{{o.commodityPrice}}</span>
              <el-button type="text" class="button"  @click="click1(`${o.id}`) ">加入购物车</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  //全部商品
  data() {
    return {
      //页号
      pageNo:1,
      //页大小
      pageSize:4,
      goods: [
      ],
      //加入购物车的默认数量
      num:1
    }

  },
  methods: {
    selectLbt(){
      this.$axios.get(`Lbt/All/${this.pageNo}/${this.pageSize}`).then((r=>{
        console.log("data",r.data.rows)
        this.goods=r.data.rows;
      }))
    },
    //加入购物车
    click1(id){
      console.log("this.$root.admin2", this.$root.admin2)
      if(this.$root.admin2 === null||this.$root.admin2===''||this.$root.admin2==='null'){
        alert("请先登账号再进行操作")
        this.$router.push("/Login")
      }else {
        this.uid=this.$root.uid
        console.log("this.$root.uid", this.uid)
        console.log("${this.id}",this.id)
        console.log("${this.num}",this.num)
        this.$axios.post(`ShoppingCart/${this.$root.uid}/${id}/${this.num}`).then((r=>{
          console.log("data",r.data)
          if(r.data==="success"){
            this.$message({
              type:"success",
              message:"加入购物车成功"
            });
          }else {
            this.$message({
              type:"error",
              message:"加入购物车失败"
            });
          }
        }))
      }

    },
  },
  created() {
    this.selectLbt();
  },

}
</script>
<style scoped>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>
